<!--
To change this template, choose Tools | Templates
and open the template in the editor.
在textarea中随插入符动态定位弹出窗口，如autocomplete
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <!--accessKey 属性设置或返回访问文本框的键盘快捷字符。注释：请使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点。        -->
        <!--tabIndex 属性设置或返回 textarea 的 tab 键控制次序。        -->
        <!--word-wrap：处理文本自动换行问题        -->
        <div style="height: 100px;background-color: #F90;margin-bottom: 10px" id="div1"></div>
        <textarea id="inputTextArea" title="" rows="" cols="" name="" accesskey="1" tabindex="1" 
                  style="width:400px;height: 200px;background-color: aliceblue;padding:0;border-style: solid; border-width: 0px; word-wrap: break-word; font-size: 14px; line-height: 18px; overflow-x: hidden;" 
                  range="61&amp;0">
        </textarea>
        <div id="textDiv" style="z-index: -1000; position: absolute; opacity: 100; overflow: hidden; height: 200px; width: 400px; padding: 0px; margin: 0px; border-style: solid; border-width: 0px; word-wrap: break-word; font-size: 14px; line-height: 18px;">
            <span id="atWhoTextSpan">
            </span>
            <span id="atWhoSignalSpan">@</span>
            <span id="atWhoKeySpan"></span>
        </div>

        <div style="z-index: 2000; position: absolute; display: block;border: 1px solid red;display:none;width: 200px" id="atWhoDiv">
            <ul style="font-size: 12px;list-style-type: none;padding-left: 5px"><div><div style="height:20px;color:#999999;padding-left:2px;padding-top:2px;line-height:18px;font-size:12px;">想用@提到谁？</div></div><li class="">大型在线游戏魔兽世界</li><li class="">当当网李国庆</li><li class="">宋丹丹</li><li class="cur">郭德纲</li><li>潘石屹</li><li>精彩电影</li><li>西藏昌都人韩红</li><li>未成年的禁止关注</li><li>围脖经典语录</li><li>美国国家地理</li></ul>
        </div>
        <script type="text/javascript">
            //获取元素的绝对纵坐标 
            function getTop(e){ 
                var offset=e.offsetTop; 
                if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
                return offset; 
            } 
            //获取元素的绝对横坐标 
            function getLeft(e){ 
                var offset=e.offsetLeft; 
                if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
                return offset; 
            } 
            //获取光标位置函数
            function getCaretPosition (el) {
                var caretPos = 0;	
                // IE Support
                if (document.selection) {
                    el.focus ();
                    var selection = document.selection.createRange ();
                    selection.moveStart ('character', -el.value.length);
                    caretPos = selection.text.length;
                }
                // Firefox support
                else if (el.selectionStart || el.selectionStart == '0')
                    caretPos = el.selectionStart;
                return (caretPos);
            }
            
            var textDiv = document.getElementById("textDiv");
            var inputTextArea = document.getElementById("inputTextArea");
            var atWhoDiv = document.getElementById("atWhoDiv");
            var atWhoSignalSpan = document.getElementById("atWhoSignalSpan");
            var atWhoKeySpan = document.getElementById("atWhoKeySpan");
            var atWhoTextSpan = document.getElementById("atWhoTextSpan");
            
            //定位textDIV
            textDiv.style.left = getLeft(inputTextArea) + "px";
            textDiv.style.top = getTop(inputTextArea) + "px";
            
            //处理文本中的@regex标记：“向前”读取离文本光标最近的@regex标记
            function processAtSign(text, caretPos) {
                var atRegex = /@[\w\u4e00-\u9fa5]+/g;
                var length = text.length;
                var subLength = length < caretPos ? length : caretPos;
                var processText = text.substring(0,subLength+1);
                var matchArray = processText.match(atRegex);
                if(matchArray ==null) {
                    return false;
                } else {
                    //读取最后一个匹配
                    var atSignKey = matchArray[matchArray.length -1];
                    var atKey = atSignKey.substring(atSignKey.indexOf("@")+1);
                    var atSignKeySIndex = processText.lastIndexOf(atSignKey);
                    var atSignKeyEIndex = atSignKeySIndex + atSignKey.length;
                    if(atSignKeyEIndex < caretPos) {
                        return false;
                    }
                    var beforeAtSignStr = processText.substring(0, atSignKeySIndex);
                    //将回车替换为html换行符
                    beforeAtSignStr = beforeAtSignStr.replace("\n","<br />")
                    atWhoTextSpan.innerHTML = beforeAtSignStr;
                    atWhoKeySpan.innerHTML = atKey;
                    return true;
                }
            }
            
            inputTextArea.onkeyup = processTextAreaEvent;
            inputTextArea.onclick = processTextAreaEvent;
            
            function processTextAreaEvent() {
                //var e = window.event || event;
                //var eventEle = e.srcElement || e.target;
                var value = inputTextArea.value;
                if(value.indexOf("@")!=-1){
                    var caretPos = getCaretPosition(inputTextArea);
                    if(processAtSign(value,caretPos)){
                        positionAtWhoDiv();
                    } else {
                        atWhoDiv.style.display = "none";
                    }
                }
            }
            function positionAtWhoDiv() {
                var atWhoDivLeft = getLeft(atWhoSignalSpan);
                var atWhoDivHeight = getTop(atWhoSignalSpan) + atWhoSignalSpan.offsetHeight;
                atWhoDiv.style.left = atWhoDivLeft + "px";
                atWhoDiv.style.top = atWhoDivHeight + "px";
                atWhoDiv.style.display = "block";
            }
        </script>
    </body>
</html>
